<!-- 个人信息 -->
<template>
  <div id="information">
    <el-row>
      <el-col>
        <Breadcrumb cur-local-name="我的信息" />
      </el-col>
      <el-col>
        <el-tabs class="info-tabs"
                 tab-position="left"
                 type="border-card"
                 style="height: 400px;"
                 @tab-click="handleClick">
          <el-tab-pane label="个人信息"
                       class="personal-info">
            <el-row v-if="!isLogin"
                    class="noLogin">
              您当前暂未登录，无法查看个人信息，请<router-link to="/login">
                <span>前往登录</span>
              </router-link>
            </el-row>           
            <el-row v-else
                    :gutter="50">
              <el-col :span="9">
                <el-form ref="userInfoForm"
                         label-width="80px"
                         :rules="userInfoForm"
                         :disabled="formDisabled"
                         :model="userInfo">
                  <el-form-item label="用户名">
                    <el-input v-model="userInfo.userName"
                              disabled />
                  </el-form-item>
                  <el-form-item label="性别"
                                prop="userGender">
                    <el-radio-group v-model="userInfo.userGender"
                                    size="medium">
                      <el-radio border
                                label="男" />
                      <el-radio border
                                label="女" />
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="年龄"
                                prop="userAge">
                    <el-input v-model="userInfo.userAge" />
                  </el-form-item>
                  <el-form-item label="手机号码"
                                prop="userPhone">
                    <el-input v-model="userInfo.userPhone" />
                  </el-form-item>
                  <el-form-item label="邮箱"
                                prop="userEmail">
                    <el-input v-model="userInfo.userEmail" />
                  </el-form-item>
                  <el-form-item label="地址"
                                prop="userAddr">
                    <el-input v-model="userInfo.userAddr" />
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="10">
                <div class="button-group">
                  <el-button v-if="formDisabled"
                             @click="formEdit">
                    编辑
                  </el-button>
                  <el-button v-else
                             type="primary"
                             @click="formSave">
                    保存
                  </el-button>
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="我的订单"
                       class="order">
            <el-row v-if="!isLogin"
                    class="noLogin">
              您当前暂未登录，无法查看个人信息，请<router-link to="/login">
                <span>前往登录</span>
              </router-link>
            </el-row>  
            <el-row v-else
                    :gutter="50">
              <template v-if="orderObj.orderCode">
                <el-col>
                  <div class="status">
                    <h1>订单状态：进行中</h1>
                    <span>您好，订单正在进行中，请保持通讯畅通，工作人员将联系你进行后续交易。谢谢！</span>
                  </div>
                </el-col>
                <el-col :span="7"
                        class="order-left">
                  <h1>订单信息</h1>
                  <div class="buyer-detail">
                    <p>买家：{{ orderObj.buyer.userName }}</p>
                    <p>联系方式：{{ orderObj.buyer.userPhone }}</p>
                    <p>下单时间：{{ orderObj.createTime }}</p>
                    <p>订单号：{{ orderObj.orderCode }}</p>
                  </div>
                </el-col>
                <el-col :span="16"
                        class="order-right">
                  <h1>车辆信息</h1>
                  <div class="car-detail">
                    <div class="car-img">
                      <img :src="orderObj.car.image">
                    </div>
                    <div class="car-info">
                      <h2 class="title-box">
                        {{ orderObj.car.fullName }}
                      </h2>
                      <ul class="car-assort">
                        <li>
                          <span>{{ orderObj.car.year }}</span>上牌时间
                        </li>
                        <li>
                          <span>{{ orderObj.car.kilo }}</span>表显里程
                        </li>
                        <li>
                          <span>{{ orderObj.car.city || '未知' }}</span>上牌地
                        </li>
                        <li>
                          <span>{{ orderObj.car.gearbox }}</span>变速箱
                        </li>
                      </ul>
                      <p class="car-price">
                        <span class="cd_price">
                          ￥{{ orderObj.car.ownerPrice }}万
                        </span>
                      </p>
                    </div>
                  </div>
                </el-col>
              </template>
              <template v-else>
                <el-col>
                  <div class="status">
                    <h1>订单状态：暂无订单</h1>
                  </div>
                </el-col>
              </template>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="修改密码"
                       class="change-pwd">
            <el-row v-if="!isLogin"
                    class="noLogin">
              您当前暂未登录，无法查看个人信息，请<router-link to="/login">
                <span>前往登录</span>
              </router-link>
            </el-row> 
            <el-row v-else>
              <el-col :span="9">
                <el-form ref="changePwdForm"
                         label-width="80px"
                         :rules="changePwdForm"
                         :model="changePwd">
                  <el-form-item label="原密码">
                    <el-input v-model="changePwd.oldUserPwd"
                              type="password" />
                  </el-form-item>
                  <el-form-item label="新密码"
                                prop="userPwd">
                    <el-input v-model="changePwd.userPwd"
                              type="password" />
                  </el-form-item>
                </el-form>
                <el-button type="primary"
                           class="pwd-button"
                           @click="changeUserPwd">
                  修改密码
                </el-button>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import Breadcrumb from '@/components/Breadcrumb.vue';
  import { getUserDetail, modifyUser } from '@/api/useroperation';
  import { getOrderList } from '@/api/order';

  export default {
    name: 'Information',
    components: {
      Breadcrumb,
    },
    data() {
      return {
        isLogin: false,
        userInfo: {
          userId: '',
          userName: '',
          userPwd: '',
          userPhone: '',
          userTrueName: '',
          userAge: '',
          userGender: '',
          userEmail: '',
          userAddr: '',
          city: '',
        },
        changePwd: {
          oldUserPwd: '',
          userPwd: '',
        },
        userInfoForm: {
          userGender: [
            { required: true, message: '请选择性别', trigger: 'change' },
          ],
          userAge: [
            { required: true, message: '请输入年龄', trigger: 'blur' },
          ],
          userPhone: [
            { required: true, message: '请输入手机号码', trigger: 'blur' },
          ],
          userEmail: [
            {
              type: 'email', required: true, message: '请输入格式正确的邮箱', trigger: 'blur',
            },
          ],
          userAddr: [
            { required: true, message: '请输入地址', trigger: 'blur' },
          ],
        },
        orderObj: {
          createTime: '',
          orderCode: '',
          buyer: {
            userName: '',
            userPhone: '',
          },
          car: {
            fullName: '',
            kilo: 0,
            ownerPrice: 0,
            gearbox: '',
            year: '',
            image: '',
          },
        },
        changePwdForm: {},
        formDisabled: true,
      };
    },
    mounted() {
      getUserDetail().then(data => {
        if (data.success) {
          this.isLogin = true;
          this.userInfo = data.user;
        }
      });
    },
    methods: {
      formEdit() {
        this.formDisabled = false;
      },
      handleClick(event) {
        if (event.index == 0) {
          getUserDetail().then(data => {
            if (data.success) {
              this.isLogin = true;
              this.userInfo = data.user;
            }
          });
        } else if (event.index == 1) {
          const params = {
            pageIndex: 0,
            pageSize: 10,
            orderInfoStr: {
              orderState: 1,
            },
          };
          getOrderList(params).then(data => {
            if (data.success) {
              if (data.orderList.length) {
                this.orderObj = data.orderList[0];
                console.log(this.orderObj);
              }
            }
          });
        }
      },
      formSave() {
        let isSave = true;
        this.$refs.userInfoForm.validate(valid => {
          if (!valid) {
            isSave = false;
            return false;
          }
        });
        if (!isSave) return;
        const userStr = this.userInfo;
        modifyUser({ userStr }).then(data => {
          this.$message.success('信息修改成功');
        });
        this.formDisabled = true;
      },
      changeUserPwd() {
        const { userId, userName } = this.userInfo;
        const { oldUserPwd, userPwd } = this.changePwd;
        const userStr = {
          userId, userName, oldUserPwd, userPwd,
        };
        if (!oldUserPwd || !userPwd) {
          this.$message.error('原密码或新密码不能为空');
          return;
        }
        if (userPwd.length < 8 || userPwd.length > 12) {
          this.$message.error('新密码长度应为8~12位');
          return;
        }
        modifyUser({ userStr }).then(data => {
          console.log(data);
          if (data.success) {
            this.$message.success('密码修改成功');
          } else {
            this.$message.error(data.errMsg);
          }
        });
      },
    },
  };

</script>
<style lang='scss'>
.el-message-box__btns {
  .el-button--primary {
    color: #fff;
    background-color: #ff5837 !important;
    border-color: #ff5837 !important;
    &:hover {
      background-color: #ff5837;
      border-color: #ff5837;
    }
  }
}
#information {
  width: 12rem;
  margin: 0.5rem auto;
  .info-tabs {
    position: relative;
    .noLogin {
      position: absolute;
      font-size: 15px;
      left: 30%;
      span {
        color: #ff5400;
      }
    }
    .el-tabs__item {
      &:hover {
        color: #ff5400;
      }
    }
    .is-active {
      color: #ff5400;
    }
    .personal-info {
      .button-group {
        margin-top: 317px;
      }
    }
    .order {
      margin: 0.2rem;
      h1 {
        height: 0.4rem;
        line-height: 0.4rem;
        font-size: 0.17rem;
        color: #666;
        margin-bottom: 0.1rem;
        border-bottom: 1px solid #eee;
      }
      .order-left {
        .buyer-detail {
          p {
            height: 0.35rem;
            line-height: 0.35rem;
            font-size: 0.15rem;
            color: #999;
          }
        }
      }
      .order-right {
        .car-detail {
          margin-top: 0.2rem;
          .car-img {
            display: inline-block;
            float: left;
            img {
              width: 2rem;
              height: 1.5rem;
            }
          }
          .car-info {
            float: left;
            height: 1.5rem;
            background: #fafafa;
            border-left: 1px solid #e6e6e6;
            padding: 0 14px;
            .title-box {
              display: inline-block;
              color: #495056;
              font-size: 0.2rem;
              font-weight: 300;
              padding-top: 7px;
              overflow: hidden;
              margin-bottom: 0.1rem;
            }
            .car-assort {
              display: flex;
              li {
                position: relative;
                flex: 1;
                text-align: center;
                color: #a5abb2;
                line-height: 20px;
                font-size: 12px;
                &:not(:last-child)::after {
                  content: "";
                  width: 1px;
                  height: 34px;
                  background-color: #e6e6e6;
                  position: absolute;
                  right: 0;
                  top: 5px;
                }
                span {
                  display: block;
                  color: #495056;
                  font-size: 16px;
                  padding-bottom: 3px;
                }
              }
            }
            .car-price {
              padding: 0.2rem 0;
              float: right;
              margin-right: 0.3rem;
              .cd_price {
                display: inline-block;
                height: 30px;
                line-height: 30px;
                color: #ff5837;
                font-size: 0.25rem;
                font-weight: 700;
              }
            }
          }
        }
      }
      .status {
        text-align: center;
        margin-bottom: 0.2rem;
        margin-right: 0.2rem;
        h1 {
          font-size: 0.2rem;
          border-bottom: none;
        }
        span {
          font-size: 0.14rem;
          color: #999;
        }
      }
    }
    .change-pwd {
      .pwd-button {
        float: right;
      }
    }
  }
}
</style>
